<template>
    <div class="bg">
        <div id="midground" class="ground"></div>
        <div id="foreground" class="ground"></div>
        <Left :nowDate="nowDate" />
        <Middle :weatherInfo="weatherInfo" :nowDate="nowDate" />
        <Right :weatherInfo="weatherInfo" />
    </div>
</template>

<script>
import Left from "../../components/dp1/left.vue";
import Middle from "../../components/dp1/middle.vue";
import Right from "../../components/dp1/right.vue";
import { getNowDate ,delay} from "../../utils";
import Ws from "../../utils/ws";
import { getWeather ,pushWebSocket} from "../../config/api";



const weather1 = require("../../assets/dp1/weather1.png");
let num = 0;
export default {
    components: {
        Left,
        Middle,
        Right
    },
    data() {
        return {
            nowDate: {
                date: "",
                hours: "",
                minutes: "",
                seconds: "",
                weekDay: ""
            },
            weatherInfo: {
                temp: 0,
                weatherImg: weather1,
                tempRange: "",
                weather: ""
            }
        };
    },
    mounted() {
        // setTimeout(()=>{
        //     pushWebSocket({type:"ALL_SCREEN_ALL_SITUATION",takeNumId:"1"})
        // },3000)
        this.nowTimes();
        this.getWeather();
        this.timer = delay.setInterval(this.nowTimes, 1000);
        this.timer1 = setInterval(this.getWeather, 1000 * 60 * 30);
        let wsType1 = "xzsp";
        let wsType2 = "yyzx";
        let wsUri1 = `${wsType1}/websocket.ws?allScreen&${new Date().getTime()}`
        let wsUri2 = `${wsType2}/websocket.ws?allScreen&${new Date().getTime()}`
        this.myWebsocket1 = new Ws("",wsUri1);
        this.myWebsocket2 = new Ws("",wsUri2);

        this.myWebsocket1.initWebSocket();
        this.myWebsocket2.initWebSocket();
    },
    destroyed() {
        this.timer && delay.clearInterval(this.timer);
        this.timer1 && clearInterval(this.timer1);
    },
    methods: {
        /**
         * 获取天气
         */
        getWeather() {
            getWeather().then((result = {}) => {
                this.weatherInfo = result.data || {};
            });
        },
        /**
         * 实时获取年月日时分秒定时器
         */
        nowTimes() {
            this.nowDate = getNowDate();
        }
    }
};
</script>

<style lang="scss" scoped>
.bg {
    width: 3072px;
    height: 896px;
    background: url("../../assets/dp1/dp1-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    color: #fff;
    img {
        display: block;
    }
}
.ground {
    animation: move 1000s linear infinite;
    opacity: 0.3;
    position: absolute;
    width: 3072px;
    height: 896px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // z-index: 99;
}
#midground {
    background: url("../../assets/dp1/midground.png") repeat 20% 0%;
}
#foreground {
    background: url("../../assets/dp1/foreground.png") repeat 20% 0%;
}
@keyframes move {
    from {
        background-position: 5% 0%;
    }
    to {
        background-position: 600% 0%;
    }
}
</style>